<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多层表头</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->
<style>
 .headerGroup{
    background: url(../../sample_html/report/head-group.png) no-repeat;
    width: 150px;
    height: 46px;
 } 
</style>
</head>
<body>
  <div class="page_content">
	<div id="maingrid"></div>
  </div>
<script type="text/javascript">
		 var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"col1":"人力部","col3":"2","col4":"25","col5":"35","col6":"33","col7":"43","col8":"3"},
      {"col1":"财务部","col3":"3","col4":"2","col5":"12","col6":"23","col7":"21","col8":"13"},
      {"col1":"技术部","col3":"5","col4":"13","col5":"45","col6":"44","col7":"32","col8":"23"},
      {"col1":"工程部","col3":"1","col4":"17","col5":"11","col6":"11","col7":"43","col8":"33"},
      {"col1":"销售部","col3":"6","col4":"25","col5":"32","col6":"2","col7":"87","col8":"3"},
      {"col1":"客服部","col3":"2","col4":"43","col5":"77","col6":"54","col7":"11","col8":"5"},
      {"col1":"市场部","col3":"8","col4":"5","col5":"11","col6":"12","col7":"2","col8":"4"},
      {"col1":"信息部","col3":"2","col4":"25","col5":"3","col6":"1","col7":"11","col8":"9"}
      ]}
       

       //数据表格
    var g;
        
    function initComplete(){
    	 g = $("#maingrid").quiGrid({
                columns: [ 
                  {  name: 'col1', width: 150, isSort:false, headerRender:function(column){
                    return '<div class="headerGroup"></div>'
                  }},
                  { display: '20~25', name: 'col3',width: 100},
                  { display: '25~30', name: 'col4',width: 100},
                  { display: '30~35', name: 'col5',width: 100},
                  { display: '35~40', name: 'col6',width: 100},
                  { display: '40~45', name: 'col7',width: 100},
                  { display: '45以上', name: 'col8',width: 100}
                ], 
                data:testData, 
                pageSize: 10, sortName: 'name',
                height: 'auto', width:755,multihead:true,usePager:false,rownumbers:false,checkbox:false,hideScrollerX:true
            });
    }
    function pertonum(stringObj){
      var newstr=stringObj.replace(/%/, "");
      return Number(newstr);
    }
          
    </script>		
</body>
</html>